import { List, Badge, Button } from 'antd-mobile';
import { routerRedux } from 'dva/router';
import React from 'react';
import styles from './dataList.less';

class BadgeDemo extends React.Component{
  constructor(props) {
    super(props);
    this.state ={
      // display: 'none',
      // arrow: 'horizontal',
      showRow: 0,
    }
  }
  showDetail(e) {
    if(e === this.state.showRow -1) {
      // this.setState({
      //   // arrow: 'horizontal',
      //   showRow: 0,
      // })
    }else{
      this.setState({
        // display: 'block',
        // arrow: '',
        showRow: e + 1,
      });
    }
  }
  goSupervison(){
    this.props.Props.dispatch(routerRedux.push('/supervision_work'));
  }

  showButton() {
    return <Button type="ghost" size="small" inline onClick={()=> this.goSupervison()}>small</Button>;
  }

  render(){
    console.log(this.props.DataTitle.score)
    return (
      <List>
        {
          this.props.List.map((item, index) => {
            return (
              <List.Item extra={item.id === this.state.showRow ? this.showButton() : ''}
                         key={item.id} arrow={item.id === this.state.showRow ? '' : 'horizontal'}
                         onClick={() =>this.showDetail(index) }
                         >
                <div className="">
                  <Badge text={0} style={{ marginLeft: 12 }}>{item.evaluating_indicator}</Badge>
                  <Badge text={item.statu} style={{ marginLeft: 12 }} />
                </div>
                <div style={{marginTop: 20, display: item.id === this.state.showRow ? 'block' : 'none'}} >
                  <div>{this.props.DataTitle.score}： {item.score}</div>
                  <div>剩余天数： {item.days_remaining}</div>
                  <div onClick={()=> console.log('督查')}>操作：<span style={{color: 'royalblue'}}>督查</span></div>
                </div>
              </List.Item>
            )
          })
        }

        {/*<List.Item extra="" arrow="horizontal">*/}
          {/*<Badge text={0} style={{ marginLeft: 12 }}>Text number 0</Badge>*/}
          {/*<Badge text={'已完成'} style={{ marginLeft: 12 }} />*/}
        {/*</List.Item>*/}
        {/*<List.Item extra="dsdd" arrow={this.state.arrow} onClick={(e) =>this.showDetail(e) }>*/}
          {/*<div>*/}
            {/*<Badge text={0} style={{ marginLeft: 12 }}>思想品德</Badge>*/}
            {/*<Badge text={'未完成'} style={{ marginLeft: 12 }} />*/}
          {/*</div>*/}
          {/*<div style={{marginTop: 20, display: this.state.display}} >*/}
            {/*<div>分值： 2</div> <div>剩余天数： 3</div> <div>操作： 督查</div>*/}
          {/*</div>*/}
        {/*</List.Item>*/}

      </List>
    )
  }
};

export default BadgeDemo;
